<template>
  <div :class="[modelName]"  v-loading="loading" >
       <ItemData v-for="item in listData" 
        :key="item.key" 
        :id="item.key" 
        :title="item.title" 
        :content="item.content" 
        :create-date="item.create_date"
        :author="item.author"
        :img="item.img"
         />
         <div v-show="listData.length > 0" class="text-center">
             <el-button @click="loadingMoreData" :loading="loadingMore" type="info" size="mini" round width="100%" >加载更多</el-button>
         </div>
        
  </div>
</template>

<script>

import ItemData from '@/components/content/ItemData'

export default {

    data () {
        return {
            'modelName':'listView',
            'loading':false,
            'loadingMore':false
        }
    },

    components:{
        ItemData
    },

    mounted(){ this.init(); },

    props:['listData'],

    methods: {
        init(){

        },
        beginLoading(){
            if(!this.loadingMore)
                this.loading = true;
        },
        finishLoading(){
            this.loading = false;
            this.loadingMore = false;
        },
        loadingMoreData(){
            this.loadingMore = true;
            this.$emit("loadingMoreData")
        }
    }
}
</script>

<style>

</style>
